<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue快速入门</title>
</head>
<body>
<!--
1. div元素不是必须的，也可以是其它元素，比如span,但是约定都是将vue实例挂载到div
2. 因为div更加适合做布局
3. id 不是必须为app , 是程序员指定,一般我们就使用app
-->
<div id="app">
    <!--
    1. {{message}} : 插值表达式
    2. message 就是从model的data数据池来设置
    3. 当代码执行时，会到data{} 数据池中去匹配数据, 如果匹配上, 就进行替换
       , 如果没有匹配上, 就是输出空
    -->
   <h1>欢迎{{message}},{{name}}</h1>
</div>
<!--引入vue.js-->
<script src="vue.js"></script>
<script>
    //创建Vue对象,可以在控制台输出查看该对象的结构(data/listeners)
    let vm = new Vue({
        el: "#app",//创建的vue实例挂载到 id=app的div
        data:{ //data{} 表示数据池(model的有了数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)
            message: "Hello-Vue!",
            name: "教育"
        }
    })

    console.log("vm=>", vm);
    console.log(vm._data.message);
    console.log(vm._data.name);
    console.log(vm.name);
    console.log(vm.message);
</script>
</body>
</html>